
	<!-- 商家端首页 -->
<template>
	<view style="background-color: #fff;min-height: 100vh;">
		<view class="images" :class="{iphones:iphone}">
			<view class="head" :style="{top:h + 5 +'px' }">
				<view class="flex align-center " @click="back">
					<view class="button flex-c">
						<text class="text">商家端</text>
						<text class="cuIcon-triangledownfill"></text>
					</view>
					<view class="title flex-c">首页</view>
				</view>
			</view>
		</view>
		<view class="bg-white main">
			<view class="title flex-cb">
				<view class="left flex-cb">
					<view class="solid_"></view>
					<text>店铺基本信息</text>
				</view>
				<view class="right flex-cb" @click="handleLocation">
					<image src="/static/dw.png" mode=""></image>
					<text>{{userinfo.shop_city}}{{userinfo.shop_district}}</text>
				</view>
			</view>
			<view class="user_img flex-cb">
				<view class="flex-cb">
					<image :src="userinfo.avatar?userinfo.avatar:'/static/logo.png'" mode=""></image>
					<text>{{userinfo.shop_name}}</text>
				</view>
				<view class="button flex-c" @click="handleLogin">退出登陆</view>
			</view>
			<view class="text_img">
				<text>店铺图片：</text>
				<view class="div_img">
					<image :src="userinfo.shop_cover?userinfo.shop_cover:'/static/logo.png'" mode=""></image>
				</view>
			</view>
			<view class="foot">
				<text>简介：</text>
				<view class="span">{{userinfo.shop_intro}}</view>
			</view>
		</view>
		<tabbar :isTab='0' :num="list"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:0,
				iphone:0,
				userinfo:{},
				list:''
			};
		},
		onLoad() {
			console.log(1);
			uni.getStorage({key:'height',success:(res)=>{this.h = res.data}})
			this.iphone = getApp().globalData.iphone
			getApp().globalData.isgoto = 'index'
			if(uni.getStorageSync('location') != ''){
				this.handleLocation()
			}
			this.$api.merchants_order_messages_unread_number().then(res=>{
				console.log(res);
				this.list = res.data
			})
		},
		onShow() {
			this.$api.merchant({},true).then(res=>{
				if(res.code == 200001){
					this.userinfo = res.data
					if(res.data.avatar){
						this.userinfo.avatar =this.$base + res.data.avatar
					}
					this.userinfo.shop_cover =this.$base + res.data.shop_cover
					uni.setStorageSync('userinfo',res.data)
				}
			})
		},
		methods:{
			back(){
				uni.switchTab({
					url:'/pages/tabbar/index'
				})
			},
			handleLocation(){
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success (res) {
						console.log(res);
						that.$api.change_lng_lat({
							lng:res.longitude,
							lat:res.latitude,
						}).then(res=>{
							if( res.code == 200001) {
								uni.setStorageSync('location',1)
								uni.showToast({icon:"none",title:'店铺经纬度设置成功'})
							}
						})
					}
				});
				
				// uni.navigateTo({
				// 	url:'/pageA/locationS/locationS'
				// })
			},
			handleLogin(){
				uni.showModal({
					confirmColor:'#1CD699',
					content:'是否确认退出登录吗？',
					title:'退出登录',
					success:(res)=>{
							if (res.confirm) {
								uni.setStorageSync("openid", '');
								uni.setStorageSync('userinfo','')
								uni.setStorageSync("expires_in",'');
								uni.setStorageSync("token_type",'');
								uni.setStorageSync("access_token",'');
								this.$utils.back(1)
							} else if (res.cancel) {
							}
						}
				})
			}
		}
		
	}
</script>

<style lang="scss"  >
.head{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	.title{
		height: 56rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		padding-right: 176rpx;
		flex: 1;
	}
	.button{
		width: 156rpx;
		height: 60rpx;
		font-size: 28rpx;
		background: rgba(255, 255, 255, .4);
		border-radius: 30rpx ;
		margin-left: 20rpx;
		color: #FFFFFF;
		.cuIcon-triangledownfill{
			font-size: 42rpx;
		}
	}
	.position{
		padding: 28rpx 20rpx 20rpx 20rpx;
		.left{
			color: #FFFFFF;
			margin-left: 3rpx;
			font-size: 24rpx;
			.cuIcon-locationfill{
				margin-right: 10rpx;
			}
			.city{
				margin-right: 10rpx;
			}
			.centigrade{
				font-size: 22rpx;
			}
		}
		.right{
			background-color: #F5F5F5;
			width: 300rpx;
			height: 52rpx;
			border-radius: 38rpx;
			color: #999999;font-size: 22rpx;
			image{
				width: 22rpx;
				height: 22rpx;
			}
			.text{
				margin-left: 10rpx;
			}
		}
	}
}
.images{
	width: 100%;
	height: 142rpx;
	background: #1CD697;
	image{
		width: 100%;height: 100%;
	}
}
.main{
	// position: relative;
	// top: -370rpx;
	margin-top: 20rpx;
	border-radius: 28rpx 28rpx 0 0 ;
	padding: 25rpx 29rpx 0 38rpx;
	.title{
		.left{
			.solid_{
				width: 8rpx;
				height: 40rpx;
				background: #1CD699;
				border-radius: 20rpx;
				margin-right: 17rpx;
			}
			text{
				width: 180rpx;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #1CD699;
			}
		}
		.right {
			min-width: 180rpx;
			height: 56rpx;
			background: #F8F8F8;
			border-radius: 28rpx;
			padding: 10rpx 20rpx;
			image{
				width: 24rpx;
				height: 27rpx;
				margin-right: 10rpx;
			}
			text{
				white-space: nowrap;
				font-size: 26rpx;
				color: #1CD699;
			}
		}
	}
	.user_img{
		margin-top: 38rpx;margin-bottom: 36rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			margin-right: 14rpx;
		}
		text{
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		.button{
			width: 180rpx;
			height: 56rpx;
			border-radius: 28rpx;
			border: 2px solid #B8B8B8;
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	.text_img{
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		.div_img{
			margin-top: 20rpx;
			margin-bottom: 22rpx;
			image{
				width: 204rpx;
				height: 204rpx;
			}
		}
	}
	.foot{
		text{
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
		.span{
			font-size: 26rpx;
			font-weight: 500;
			line-height: 50rpx;
		}
	}
}
.iphones{
	height: 180rpx;
}
</style>

